@import '../theme/index.less';

@mi-list-search: ~'@{mi-prefix}list-search';
.@{mi-list-search} {
    &-item {
        .flex(center, flex-start);
        width: 100%;
        .properties(margin-right, 16);

        > label {
            color: var(--mi-font, @mi-font);
            .properties(margin-right);
            .flex();
            .properties(min-width, 70);

            &:after {
                content: ': ';
                display: block;
            }
        }

        &.ptb8 {
            padding: 8px 0;
        }
    }

    &-item,
    &-btns-l {
        > input {
            .linear-gradient-background();
            border: 1px solid var(--mi-border, @mi-border);
            .border-radius();
            .properties(margin-right);
            color: var(--mi-font, @mi-font);
            outline: none;

            &:focus,
            &:hover {
                border-color: var(--mi-theme, @mi-theme);
                box-shadow: 0 0 4px fade(@mi-theme, 20%);
            }
        }
    }

    &-btns {
        .flex(center, space-between);
        top: @mi-content-padding-top;
        position: sticky;
        background: var(--mi-dark-grey, @mi-dark-grey);
        z-index: 20;

        &-l {
            .flex(center, flex-start);
            .properties(margin-bottom, 16);

            &-b {
                .flex();
            }
        }

        &-r {
            .flex(center, flex-end);
            .properties(margin-bottom, 16);

            > button {
                .properties(margin-right);

                &:last-child {
                    margin-right: 0;
                }
            }

            @media only screen and (max-width: 576px) {
                justify-content: flex-start;
            }
        }

        &.no-search &-r {
            justify-content: flex-start;
        }
    }
}

@media only screen and (max-width: 1400px) {
    .@{mi-list-search} {
        &-btns {
            align-items: flex-start;

            &-l {
                &.multiple {
                    flex-direction: column;
                    align-items: flex-start;

                    label {
                        .properties(margin-top, -8);
                    }

                    input {
                        .properties(margin-bottom);
                    }
                }
            }

            &-r {
                &.multiple {
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: flex-start;

                    > button {
                        margin-right: 0;
                        .properties(margin-bottom);

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 768px) {
    .@{mi-list-search} {
        &-btns {
            &-l {
                .properties(padding, 16);
                .border-radius(10);
                .linear-gradient-background();

                &.multiple &-b {
                    width: 100%;
                }
            }
            
            &-r {
                &.multiple {
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    > button {
                        margin-bottom: 0;
                        .properties(margin-right);

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
}